<template>
	<div id="defetType">
		<div style="display: flex; justify-content: flex-end; margin-top: 10px;">
			<el-button class="defetTypeBtn" type="primary" plain @click="$router.push('/addDefetInfo')">添加缺陷类型</el-button>
		</div>
		<el-divider></el-divider>
		<el-table :data="tableData.list" border style="width: 100%">
			<el-table-column align="center" prop="configvaluename" label="缺陷类型名称" width="380">
			</el-table-column>
			<el-table-column align="center" prop="isstart" label="状态(启用|停用)" width="380">
				<template slot-scope="scope">
					<el-checkbox v-model="scope.row.isstart === 1 ? true : false"
						@change="handlerCheckBoxChange(scope.row)"></el-checkbox>
				</template>
			</el-table-column>
			<el-table-column align="center" prop="address" label="操作">
				<template slot-scope="scope">
					<a href="javascript:void(0)" @click="openModal(scope.row)">修改</a> | <a href="javascript:void(0)" @click="handlerDel(scope.row)">删除</a>
				</template>
			</el-table-column>
		</el-table>

		<!-- Modal -->
		<div>
			<div class="overlay" v-if="showModal"></div>
			<div class="modal" v-if="showModal">
				<div class="modal-content">
					<span class="close-button" @click="closeModal">&times;</span>
					<h6>修改缺陷类型</h6>
					<el-input placeholder="请输入缺陷类型" v-model="psSystemconfig.configvaluename"></el-input>
					<div class="radio-group" style="margin: 10px;">
						<span>启用状态:</span>
						<el-radio v-model="psSystemconfig.isstart" label="1">启用</el-radio>
						<el-radio v-model="psSystemconfig.isstart" label="0">停用</el-radio>
					</div>
					<el-button type="success" @click="submitForm">保存</el-button>
				</div>
			</div>
		</div>

	</div>
</template>

<script>
	import {
		getDefetTypeDates,
		modifyDefetStatus,
		modifyDefetInfo,
		delDefetInfo
	} from '../../config/request.js'
	export default {
		data() {
			return {
				showModal: false,
				textInput: '',
				selectedOption: '',
				tableData: [{
					date: '叉粱断裂',
					name: true,
				}, {
					date: '拦河线断裂',
					name: false,
				}, {
					date: '绝缘子爆破',
					name: true,
				}, {
					date: '杆塔倾斜',
					name: true,
				}],
				psSystemconfig: {
					configcode: 'BUG_TYPE',
					isstart: '',
					id: '',
					configvaluename: ''
				},
				debounceSubStart: this.$debounce(this.subStart, 500),
			}
		},
		created() {
			this.loadAll();
		},
		methods: {
			loadAll() {
				getDefetTypeDates(this.psSystemconfig).then(res => {
					this.tableData = res.data.pageInfo;
				}).catch(err => {
					this.$notify.error({
						title: '请求错误',
						message: err,
						duration: 1500
					})
				})
			},
			handlerCheckBoxChange(row) {
				row.isstart = row.isstart === 1 ? 0 : 1;
				this.debounceSubStart(row);
			},
			subStart(row) {
				this.psSystemconfig.isstart = row.isstart;
				this.psSystemconfig.id = row.id;
				modifyDefetStatus(this.psSystemconfig).then(res => {
					if (res.code === 200) {
						this.$message.success('保存成功');
					}
				}).catch(err => {
					this.$notify.error({
						title: '请求错误',
						message: err,
						duration: 1500
					})
				})
			},
			openModal(obj) {
				this.psSystemconfig.id = JSON.parse(obj.id);
				this.showModal = true;
			},
			closeModal() {
				this.showModal = false;
			},
			submitForm() {
				// 处理提交逻辑
				modifyDefetInfo(this.psSystemconfig).then(res => {
					if (res.code === 200) {
						this.$message.success('保存成功');
					}
				}).catch(err => {
					this.$notify.error({
						title: '请求出错!',
						message: err,
						duration: 1500
					})
				})
				this.closeModal();
			},
			handlerDel(obj){
				if(confirm('确定要删除吗？')){
					delDefetInfo(obj).then(res=>{
						if(res.code === 200){
							this.$message.success('删除成功');
							this.loadAll();
						}
					}).catch(err=>{
						this.$notify.error({
							title:'删除异常',
							message:''+err,
							duration:1500
						})
					})
				}
			}
		}
	}
</script>

<style>
	#defetType {
		display: flex;
		flex-direction: column;
	}

	a {
		text-decoration: none;
	}

	.overlay {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		z-index: 1;
	}

	.modal {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 2;
	}

	.modal-content {
		background-color: #fefefe;
		padding: 20px;
		border: 1px solid #888;
		border-radius: 10px;
		box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	}

	.close-button {
		color: #aaa;
		float: right;
		font-size: 28px;
		font-weight: bold;
	}
</style>